<template>
  <div
    class="custom-modal-wrap"
    ref="modalWrapRef"
    v-if="visible"
    @click="onClose"
  >
    <div class="custom-modal" @click.stop>
      <div
        class="loading-wrap"
        :style="{ visibility: loading ? 'visible' : 'hidden' }"
        @click.prevent
      >
        <Decoration9 style="width: 150px; height: 150px"></Decoration9>
      </div>
      <div class="custom-modal-content">
        <div class="title">
          {{ buildDetail.build_name }} - 入驻{{ $L("租客") }}
          <div class="close-button" @click="onClose">
            <CloseCircleOutlined />
          </div>
        </div>
        <div class="controls-line">
          <div class="filters-wrap">
            <div
              v-for="(item, index) of statusList"
              :key="index"
              class="filter-item"
              :class="{
                'filter-item-current': currentStatus.key == item.key,
              }"
              @click="handleRoomStatusFilter(item)"
            >
              <span
                class="filter-item-color"
                :style="{ background: item.color }"
              ></span>
              <span
                class="filter-item-title"
                :style="{
                  color: currentStatus.key == item.key ? item.color : '#FFF',
                }"
                >{{ item.title }}</span
              >
            </div>
          </div>
          <div class="search-wrap"></div>
        </div>
        <div class="room-list hide-scroller-bar">
          <template v-if="roomList.length > 0">
            <div
              v-for="(layer, layerIndex) of roomList"
              :key="layerIndex"
              class="layer-item"
            >
              <template v-if="layer.room_list && layer.room_list.length > 0">
                <div
                  v-for="(room, roomIndex) of layer.room_list"
                  :key="roomIndex"
                  class="room-item"
                  :style="{
                    border: room.roomColor
                      ? '1px solid' + room.roomColor
                      : room.show_tags.includes('逾')
                      ? '1px solid #ff7875'
                      : '1px solid #c6e0a7',
                  }"
                  @click="onRoomClick(room)"
                >
                  <div class="room-item-name-wrap">
                    <span
                      :style="{
                        background: room.roomColor
                          ? room.roomColor
                          : room.show_tags.includes('逾')
                          ? '#ff7875'
                          : '#c6e0a7',
                      }"
                      class="room-item-name"
                      >{{ room.room_name }}</span
                    >
                  </div>
                  <div class="room-tenant">
                    {{ room.tenant_name }}
                  </div>
                  <div class="room-area">{{ room.build_area }}㎡</div>
                  <div class="room-time">
                    {{ getExpireTimeTxt(room) }}
                  </div>
                  <div
                    class="room-tags"
                    v-if="room.show_tags && room.show_tags.length > 0"
                  >
                    <span
                      v-for="(tag, tagIndex) of room.show_tags"
                      :key="tagIndex"
                      :style="{
                        backgroundColor: tag === '逾' ? '#ff7875' : '#c6e0a7',
                      }"
                      class="tag"
                    >
                      {{ tag }}
                    </span>
                  </div>
                </div>
              </template>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 房间详情 -->
    <RoomDrawer
      v-if="roomDrawerVisible"
      :visible="roomDrawerVisible"
      @cancel="closeRoomDrawer"
      :detail="roomDetail"
      pageFrom="SpaceManagement"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
} from "vue";
import request from "../../../../common/utils/request";
import store from "../../../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { CloseCircleOutlined } from "@ant-design/icons-vue";
import { BorderBox13, Decoration9 } from "@kjgl77/datav-vue3";
import moment from "moment";
import RoomDrawer from "../../../../components/village/RoomDrawer.vue";

export default defineComponent({
  name: "BuildSection",
  components: { CloseCircleOutlined, Decoration9, RoomDrawer },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    buildDetail: {
      type: Object,
      default: () => {},
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      roomData: [],
      roomList: [],
      noRoom: null,
      statusList: [],
      currentStatus: {},
      loading: false,

      roomDrawerVisible: false,
      roomDetail: {},
    });

    const onClose = () => {
      context.emit("onClose");
    };

    const getData = () => {
      state.loading = true;
      const params = {
        buildId: props.buildDetail.id,
        villageId: props.buildDetail.village_id,
      };
      request.get("/village", "/profile/profile", params).then((res) => {
        state.roomData = res.list;
        state.roomList = res.list;
        state.noRoom = res.list.length == 0;
        state.statusList = res.room_status_color.map((item) => {
          item.key = `${item.type}_${item.limit}`;
          return item;
        });
        state.loading = false;
      });
    };

    let interval = null;
    const init = () => {
      state.loading = true;
      interval = setInterval(() => {
        if (props.buildDetail.village_id) {
          getData();
          clearInterval(interval);
          interval = null;
        }
      }, 100);
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          state.currentStatus = {};
          clearInterval(interval);
          interval = null;
        }
      }
    );

    /** 筛选房源 */
    const handleRoomStatusFilter = (status) => {
      if (state.currentStatus && state.currentStatus.key == status.key) {
        state.currentStatus = {};
      } else {
        state.currentStatus = status;
      }
      if (state.currentStatus.key) {
        state.roomList = [];
        let list = JSON.parse(JSON.stringify(state.roomData));
        list.forEach((layer) => {
          if (layer.room_list && layer.room_list.length > 0) {
            let roomList = [];
            layer.room_list.forEach((room) => {
              if (room.roomColorType == state.currentStatus.key) {
                roomList.push(room);
              }
            });
            layer.room_list = roomList;
          }
          state.roomList.push(layer);
        });
      } else {
        state.roomList = JSON.parse(JSON.stringify(state.roomData));
        console.log(state.roomList);
      }
    };

    /** 状态展示文字 */
    const getExpireTimeTxt = (room) => {
      //锁定房间
      if (room.is_lock) {
        // 如果是意向合同锁定
        if (room.extra_lock && room.extra_lock.length > 0) {
          room.lock_end_time = room.extra_lock[0].purposeUnlockTime;
          room.extra_lock.forEach((item) => {
            // 找出最近时间
            if (moment(item.purposeUnlockTime).isBefore(room.lock_end_time)) {
              room.lock_end_time = item.purposeUnlockTime;
            }
          });
          return `${room.lock_reason},锁定至${room.lock_end_time}`;
        } else {
          return `${room.lock_reason}`;
        }
      } else {
        const status = Number(room.show_status);
        if (status > 3 && status < 7) {
          return `${room.lease_end_date}到期`;
        } else if (status == 1) {
          return `空置${room.vacant_days}日`;
        } else if (status == 7) {
          return `${room.lease_end_date}已到期`;
        }
        return "";
      }
    };

    const onRoomClick = (room) => {
      state.roomDetail = room;
      state.roomDrawerVisible = true;
    };

    const closeRoomDrawer = () => {
      state.roomDrawerVisible = false;
      getData();
    };

    return {
      ...toRefs(state),
      onClose,
      handleRoomStatusFilter,
      getExpireTimeTxt,
      onRoomClick,
      closeRoomDrawer,
    };
  },
});
</script>

<style lang="less" scoped>
.custom-modal-wrap {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.45);

  .custom-modal {
    width: 120rem;
    height: 80rem;
    margin: 6rem auto 0 auto;
    border-radius: 0.8rem;
    overflow: hidden;
    color: #fff;
    position: relative;

    .loading-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 3rem;
      z-index: 1002;
      cursor: default;
    }

    :deep(.border-box-content) {
      padding: 1.2rem;
    }

    .custom-modal-content {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 77, 145, 0.9);
      border-radius: 3rem;
      box-shadow: inset 0 0 1rem #fff;
      backdrop-filter: blur(0.3rem);

      .title {
        height: 8rem;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 2rem;
        font-weight: bold;
        padding-top: 2rem;
        padding-bottom: 2rem;

        .close-button {
          position: absolute;
          top: 0.5rem;
          right: 1rem;
          width: 4rem;
          height: 4rem;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          font-size: 2rem;
        }
      }

      .controls-line {
        height: 3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2rem;

        .filters-wrap {
          display: flex;
          align-items: center;

          .filter-item {
            padding: 0.4rem 1.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #f1f1f1;
            border-radius: 2rem;
            cursor: pointer;
            margin-left: 1.5rem;
            font-size: 1.2rem;

            .filter-item-color {
              width: 1.5rem;
              height: 1.5rem;
              margin-right: 0.6rem;
            }

            &:first-child {
              margin-left: 0;
            }
          }

          .filter-item-current {
            background-color: #fff;
          }
        }
      }

      .room-list {
        width: 100%;
        height: calc(100% - 11rem);
        overflow: hidden auto;
        padding: 2rem;
        position: relative;

        .layer-item {
          display: flex;
          flex-wrap: wrap;

          .room-item {
            margin-top: 1.5rem;
            margin-left: 1.5rem;
            border: 1px solid #f1f1f1;
            width: 21rem;
            height: 14rem;
            border-radius: 1rem;
            padding: 0.5rem 2rem;
            text-align: left;
            position: relative;
            cursor: pointer;

            &:nth-child(5n + 1) {
              margin-left: 0;
            }

            .room-item-name-wrap {
              padding-bottom: 0.5rem;
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;

              &::after {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                /* 箭头靠下边 */
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background: linear-gradient(
                  to right,
                  #285a81,
                  #1e9fdc,
                  #285a81
                );
                margin: 0 auto;
              }

              .room-item-name {
                display: block;
                padding: 0 0.6rem;
                border-radius: 0.4rem;
                font-size: 1.6rem;
              }
            }

            .room-tenant {
              padding-top: 0.5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .room-area {
              //   padding-top: 0.3rem;
            }

            .room-time {
              //   padding-top: 0.3rem;
            }

            .room-tags {
              position: absolute;
              bottom: 0.6rem;
              right: 0.3rem;
              .tag {
                padding: 0.2rem 0.4rem;
                color: #fff;
                margin-right: 0.4rem;
                border-radius: 0.2rem;
                font-size: 1.2rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
